<template>
	<view class="orderDetails">
		<!-- 提货信息 -->
		<view class="detail-top">
			<view class="delivery-msg pd">提货信息</view>
			<!-- <view class="pd">
				<view class="color-A1A1A1">提货人</view>
				<view class="color-343434">{{orderDetail.address.name}}</view>
			</view> -->
			<view class="pd">
				<view class="color-A1A1A1">昵称</view>
				<view class="color-343434">{{ user.nickname }}</view>
			</view>
			<!-- <view class="pd">
				<view class="color-A1A1A1">提货地点</view>
				<view class="color-343434">{{orderDetail.shop.city}} {{orderDetail.shop.shopname}}</view>
			</view> -->
			<view class="pd border-bottom">
				<view class="color-A1A1A1">提货人电话</view>
				<view class="color-343434 phoneNum">
					{{user.mobile}}
					<!-- <view class="phone" @tap="markPhone(orderDetail.address.mobile)">
						<image src="../../static/images/shop/m7.png" mode=""></image>
						联系客户
					</view> -->
				</view>
			</view> 
		<!-- 	<view class="shopNum pd">
				共{{orderDetail.pay.number}}商品 小计: <text class="color-FF4400">{{orderDetail.pay.order_price}}积分</text>
			</view> -->
		</view>
		<!-- 商品详情 -->
		<view class="detail-center" v-for="(item,index) in orderDetail.goods">
			<view class="shop-des flex pd border-b">
				<view>商品详情（共计<text class="color-FF4400">{{item.number}}</text>件商品）</view>
				<view class="color-999">{{orderDetail.logistics.status}}</view>
			</view>
			<view class="shop-img flex">
				<view class="left-img">
					<image :src="$wanlshop.oss(item.image)" mode="widthFix"></image>
				</view>
				<view class="right-img">
					<view class="name">{{item.title}}</view>
					<view>规格：{{item.difference}} <text style="margin-left: 8rpx;">商品数量：{{item.number}}</text> </view>
				</view>
			</view>
			<view class="money pd">商品金额：<text class="text-decoration">￥{{item.price}}</text></view>
			<view class="money pd border-b u-padding-bottom-30">积分数量：<text class="color-FF4400">{{item.price}}</text></view>
			<view class="bottom">
				支付积分数量：<text class="color-FF4400">{{item.price}}</text>
				<!-- <image src="../../static/images/shop/help.png" mode=""></image> -->
				（{{orderDetail.logistics.status}}<text v-if="orderDetail.paymenttime_text">{{orderDetail.paymenttime_text}}</text>）
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="orderInfo">
			<view class="delivery-msg pd ">
				订单信息
			</view>
			<view class="u-padding-bottom-26 u-padding-top-30 pd flex">
				<view class="color-A1A1A1">订单编号</view>
				<view>{{orderDetail.order_no}}</view>
			</view>
			<view class="u-padding-bottom-26 pd flex" v-if="orderDetail.createtime_text">
				<view class="color-A1A1A1">下单时间</view>
				<view class="color-343434">{{orderDetail.createtime_text}}</view>
			</view>
			<view class="u-padding-bottom-26 pd flex" v-if="orderDetail.paymenttime_text">
				<view class="color-A1A1A1">支付时间</view>
				<view class="color-343434">{{orderDetail.paymenttime_text}}</view>
			</view>
			<view class="u-padding-bottom-26 pd flex" v-if="orderDetail.taketime_text">
				<view class="color-A1A1A1">提货时间</view>
				<view class="color-343434">{{orderDetail.taketime_text}}</view>
			</view>
			<view class="u-padding-bottom-26 pd flex">
				<view>积分数量</view>
				<view>{{orderDetail.pay.order_price}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				shopTotal: 1,
				orderDetail:{}
			};
		},
		onLoad(options) {
			let id = options.id
			this.init(id)
		},
		computed: {
			...mapState(['user'])
		},
		methods:{
			//初始化订单数据
			init(id) {
				// let id = 420;
				this.$api.get({
					url: '/wanlshop/order/getOrderInfo',
					data: { id },
					success: res => {
						this.orderDetail = res;
						console.log(this.orderDetail)
					}
				})
			},
			//拨打电话
			markPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.orderDetails {
		padding: 30rpx 32rpx;

		.flex {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.pd {
			padding: 0 17rpx;
		}

		.border-b {
			border-bottom: 1px solid #eee;
		}

		.color-FF4400 {
			color: #ff4400;
		}

		.delivery-msg {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #3F3F3F;
			padding-bottom: 25rpx;
			border-bottom: 1px solid #EEEEEE;
		}

		.detail-top {
			border-radius: 16rpx;
			padding: 24rpx 0;
			background-color: #fff;

			&>view {
				display: flex;
				justify-content: space-between;
				margin-bottom: 18rpx;
				align-items: center;

				.color-343434 {
					color: #343434;
				}

				.phoneNum {
					display: flex;
					align-items: center;
				}

				.color-A1A1A1 {
					color: #A1A1A1;
					min-width: 150rpx;
				}

				.phone {
					width: 184rpx;
					height: 56rpx;
					border: 2rpx solid #FF4400;
					border-radius: 28rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FF4400;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 9rpx;

					image {
						width: 27rpx;
						height: 26rpx;
						margin-right: 9rpx;
					}
				}
			}



			.border-bottom {
				border-bottom: 1px solid #eee;
				padding-bottom: 30rpx;
			}

			.shopNum {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #3F3F3F;
				justify-content: flex-end;

				.color-FF4400 {
					color: #FF4400;
					text-indent: 6rpx;
				}
			}
		}

		.detail-center {
			border-radius: 16rpx;
			padding: 24rpx 0;
			background-color: #fff;
			margin-top: 30rpx;

			.shop-des {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #3F3F3F;
				padding-bottom: 26rpx;

				.color-FF4400 {
					color: #ff4400;
				}

				.color-999 {
					color: #999;
				}
			}

			.shop-img {
				justify-content: flex-start;
				padding-top: 30rpx;

				.left-img {
					margin-right: 36rpx;
					width: 86rpx;
					height: 86rpx;
					image {
						width: 86rpx;
						height: 86rpx;
					}
				}

				.right-img {
					&>view {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #A1A1A1;
					}

					.name {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #3F3F3F;
						margin-bottom: 20rpx;
					}
				}
			}

			.money {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #A1A1A1;
				margin: 20rpx 0;

				.text-decoration {
					text-decoration: line-through;
				}
			}

			.bottom {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #A1A1A1;
				text-align: center;

				image {
					width: 22rpx;
					height: 22rpx;
					vertical-align: middle;
					margin: 0 20rpx 0 7rpx;
				}
			}
		}
		.orderInfo{
			border-radius: 16rpx;
			padding: 24rpx 0;
			background-color: #fff;
			margin-top: 30rpx;
			
		}
	}
</style>
